<template>
  <div class="page-left">
    <!-- 左侧组件列表 -->
    <el-collapse v-model="activeNames">
      <el-collapse-item v-for="(item, index) in componentList" :key="index" class="component-item" :title="item.title"
        :name="index + 1">
        <ul class="component-list">
          <!-- 添加拖拽方法 -->
          <li v-for="(component, size) in item.components" :key="size"
            :class="draggableEnable(component) ? 'drag-enabled' : 'drag-disabled'"
            :draggable="draggableEnable(component)" @dragstart="onDragStart(component)" @dragend="onDragEnd(component)">
            <i :class="component.iconClass"></i>
            <p class="name">{{ component.name }}</p>
            <p class="num">
              {{ componentMap[component.data.component] ||0}}/{{ component.maxNumForAdd }}
            </p>
          </li>
        </ul>
      </el-collapse-item>
    </el-collapse>

  </div>
</template>

<script>
import { mapMutations,mapState,mapActions } from 'vuex'
import componentList from '@/config/component-list.js'
export default {

  data() {
    return {
      componentList,
      activeNames: ['1']
    };
  },

  mounted() {
    //  console.log(this.componentMap[component.data.component],'mapp');
  },
  computed: {
    ...mapState(['addComponentIndex','dragComponent']),
       //页面组件被使用的数量
       componentMap() {
      return this.$store.getters.pageComponentTotalMap
    }
  },
  methods: {
    ...mapMutations(['SET_DRAG_STATE', 'SET_DRAG_COMPONENT']),
    ...mapActions(['pageChange']),
    //判断当前元素是否能拖拽
    draggableEnable(component) {
      //组件使用上限与组件使用次数进行比较
      const curNum = this.componentMap[component.data.component] || 0
      return curNum < component.maxNumForAdd
    },
    onDragStart(component) {
      console.log(component, 'start');
      //修改拖动状态
      this.SET_DRAG_STATE(true)
      //修改拖动组件对象 数据用json深拷贝
      this.SET_DRAG_COMPONENT(JSON.parse(JSON.stringify(component)))
    },
    onDragEnd(component) {
      console.log('拖拽结束');
       //修改拖动状态
       this.SET_DRAG_STATE(false)
       //获取添加组件的素银
       const addIndex=this.addComponentIndex
       //给crs发送一份添加组件的数据
       this.pageChange({
        type:'add',
        index:addIndex,
        data:this.dragComponent
       })
    }
  },
};
</script>
<style lang="less" scoped>
// 左侧框架
.page-left {
  position: absolute;
  top: 56px;
  left: 0;
  width: 186px;
  overflow-x: hidden;
  overflow-y: auto;
  bottom: 0;
  background: #fff;
  user-select: none;
  z-index: 10;

}

// 组件列表
.component-item {
  padding: 0 20px;
  margin-top: 22px;

  .component-list {
    overflow: hidden;

    li {
      float: left;
      width: 50%;
      font-size: 12px;
      padding-bottom: 8px;
      text-align: center;

      &.drag-enabled {
        cursor: move;
      }

      &.drag-disabled {
        cursor: not-allowed;
      }

      &.drag-enabled:hover {
        background: @color-1;
        color: #fff;
        border-radius: 2px;

        .ico {
          background-position: 0 -32px;
        }

        .num,
        .name {
          color: #ffffff !important;
        }
      }

      .ico {
        display: inline-block;
        margin-top: 8px;
        background-position: 0 0;
        height: 32px;
        width: 32px;
        background-size: cover;
      }

      .name {
        line-height: 16px;
        margin-top: -4px;
      }

      .num {
        font-size: 12px;
        color: #999999;
      }
    }
  }
}

// 折叠面板样式
.el-collapse {
  border: none;

  /deep/ .el-collapse-item__header {
    border: none;
    height: 30px;
    line-height: 30px;
  }

  /deep/ .el-collapse-item__wrap {
    border: none;
  }

  /deep/ .el-collapse-item__content {
    padding-bottom: 0;
  }
}
</style>